import { create } from "zustand";
import ContainerDev from "../materials/Container/dev";
import ContainerProd from "../materials/Container/prod";
import ButtonDev from "../materials/Button/dev";
import ButtonProd from "../materials/Button/prod";
import PageDev from "../materials/Page/dev";
import PageProd from "../materials/Page/prod";
export interface ComponentSetter{//可修改属性
    name:string;//组件名字
    label:string;//组件名称
    type:string//组件类型
    [key:string]:any//剩余个个组件自己特定的属性
}
export interface ComponentConfig{
    name:string;//组件名称
    defaultProps:Record<string,any>;//组件默认属性
    // component:any// 实际的 React 组件
    desc:string//组件描述
    setter?:ComponentSetter[]//可修改属性
    stylesSetter?:ComponentSetter[]//可修改样式
    dev:any//开发模式下的组件
    prod:any//预览模式下的组件
}
export interface State {
    componentConfig: {
        [key: string]: ComponentConfig
    }
}
export interface Action{
    registerComponent:(name:string,componentConfig:ComponentConfig)=>void//注册组件
}

//放的是每一个组件样子，名字对应于components仓库内的name
export const useComponentConfigStore = create<State & Action>((set) => ({
    componentConfig:{
        Container:{
            name:"Container",
            defaultProps:{},
            // component:Container,
            desc:'容器',
            dev:ContainerDev,
            prod:ContainerProd,
        },
        Button:{
            name:"Button",
            defaultProps:{
                type:'primary',
                text:'按钮'
            },
            // component:Button,
            dev:ButtonDev,
            prod:ButtonProd,
            desc:'按钮',
            setter:[//属性
                {
                    name:'type',
                    label:'按钮类型',
                    type:'select',
                    options:[
                        {
                            label:'主要按钮',
                            value:'primary'
                        },
                        {
                            label:'次要按钮',
                            value:'default'
                        }
                    ]
                },
                {
                    name:'text',
                    label:'文本',
                    type:'input',
                }
            ],
            stylesSetter:[//样式
                {
                    name:'width',
                    label:'宽度',
                    type:'inputNumber',
                },
                {
                    name:'height',
                    label:'高度',
                    type:'inputNumber',
                }
            ]
        },
        Page:{
            name:"Page",
            defaultProps:{},
            // component:Page,
            dev:PageDev,
            prod:PageProd,
            desc:'页面'
        }
    },
    registerComponent:(name,componentConfig)=>{//注册组件，自定义组件
        set((state)=>{
            return{
                componentConfig:{
                    ...state.componentConfig,//保留原有的组件
                    [name]:componentConfig//添加新的组件
                }
            }
        })
    },
}))
